<template>
  <div class="Home">
    <header>
      <div class="imgs">
        <img class="logo" src="../../assets/images/Logo_03.jpg" alt />
        <div class="search">
          <svg-icon class="sou" iconClass="fangdajing"></svg-icon>
          <input type="text" class="sou-input" placeholder="搜索商品" />
        </div>
      </div>
      <div class="tab">
        <router-link to="/main">首页</router-link>

        <router-link to="/newshop">新品优惠</router-link>

        <router-link to="/newshop">每日新品</router-link>

        <router-link to="/newshop">家用电器</router-link>

        <router-link to="/newshop">热门推荐</router-link>

        <router-link to="/newshop">日用文创</router-link>

        <router-link to="/newshop">数码3C</router-link>
      </div>
    </header>
    <main ref="mainRef" @scroll="onScrollChange">
      <router-view />
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  created() {
  },
  activated() {
    // 启用
    this.$refs.mainRef.scrollTop = this.scrollTop;
  },
  methods: {
    onScrollChange($event) {
      this.scrollTop = $event.target.scrollTop;
    }
  }
  // deactivated() {
  //     // 缓存
  //     this.scrollTop = this.$refs.mainRef.scrollTop
  //     console.log(this.$refs.mainRef, this.$refs.mainRef.scrollTop)
  // },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.Home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: px2rem(94);
  background: #f52c2c;
  .imgs {
    padding: px2rem(0) px2rem(18);
    width: 100%;
    height: px2rem(50);
    display: flex;
    align-items: center;
    .logo {
      width: px2rem(70);
      height: px2rem(23);
      padding: px2rem(0) px2rem(10);
    }
    .search {
      flex: 1;
      height: px2rem(30);
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: px2rem(20);
      .sou-input {
        width: 100%;
        height: px2rem(28);
        font-size: px2rem(16);
        border-radius: px2rem(20);
        border: none;
        outline: none;
        color: #d3c7c4;
      }
      .sou {
        width: px2rem(16);
        height: px2rem(16);
        margin: px2rem(0) px2rem(6) px2rem(0) px2rem(12);
        color: #d3c7c4;
      }
    }
  }
  .tab {
    width: 100%;
    height: px2rem(44);
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
    a {
      flex-shrink: 0;
      font-size: px2rem(16);
      padding-left: px2rem(15);
      color: #fff;
      flex-shrink: 0;
    }
  }
}
main {
  flex: 1;
  overflow-y: auto;
  background: #f5f5f5;
}
footer {
  width: 100%;
  height: px2rem(55);
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: px2rem(20px) px2rem(26px);
  background: #fff;
  a {
    text-align: center;
    color: #333;
    font-size: px2rem(12);
    text-decoration: none;
    .iconimg {
      width: px2rem(18);
      height: px2rem(18);
      display: block;
      margin: px2rem(0) auto;
    }
  }
}
</style>